<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!--vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <!-- jq -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title>Title</title>
</head>

<body>
<div id="show">
    <ul>
        <li v-for="t1 in tickets">
            姓名：<span>{{t1.name}}</span> &nbsp;&nbsp;&nbsp;
            票数：<span>{{t1.count}}</span>
        </li>
    </ul>
    <button @click="test">axios</button>
    <br/>
    <!-- 投票总人数：<span id="total"></span> -->
    投票总人数：<span id="total">{{total}}</span>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#show",
        data: {
            tickets: [],
            total: '统计中...'
        },
        //创建vue对象时执行
        mounted: function () {
            //前端发送websocket连接请求
            var id = 1;
            var webSocketUrl = "ws://localhost:8080/" + "webSocket/" + id;
            var websocket = new WebSocket(webSocketUrl);
            websocket.onmessage = function (event) {
                var data = event.data;
                console.log(data)
                // $("#total").html(data);
                vm.total = data;
            }
        },
        methods: {
            test: function () {
                var url1 = "http://localhost:8080/contestant/getTicket";
                axios.get(url1).then((res) => {
                    console.log(res.data.data);
                    this.tickets = res.data.data;
                });
            }


        }
    });

</script>

</html>